<template>
    <div class="container">
        <el-form
            :model="ruleForm"
            ref="ruleForm"
            :rules="rules"
            :label-position="labelPosition"
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="申请人姓名：">{{ruleForm.name}}</el-form-item>
                    <el-form-item label="担保公司：">{{ruleForm.guaranteeCompanyName}}</el-form-item>
                    <el-form-item label="申请用途：">{{ruleForm.remarks}}</el-form-item>
                    <el-form-item label="抵押品：">{{ruleForm.amount}}</el-form-item>
                    <el-form-item label="抵押品估值：">{{ruleForm.mortgageValue}}</el-form-item>
					<el-form-item label="申请贷款金额：">{{ruleForm.amount}}</el-form-item>
					<el-form-item label="还款时间：">{{ruleForm.repaymentTime}}</el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="放款时间：">{{ruleForm.updateTime}}</el-form-item>
                    <el-form-item label="放款银行：">{{ruleForm.bankName}}</el-form-item>
                    <el-form-item label="还款周期：">{{ruleForm.loanPeriod }}</el-form-item>
                    <el-form-item label="剩余周期：">{{ruleForm.surplusNum}}</el-form-item>
                    <el-form-item label="需还总额：">{{ruleForm.totalAmount}}</el-form-item>
                    <el-form-item label="剩余应还：">{{ruleForm.surplusAmount}}</el-form-item>

                </el-col>
            </el-row>
            <!-- <el-form-item label="操作信息："> -->
                <el-table
                    :data="tableData"
                    border
                    style="margin-top:20px;"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="name" sortable label="还款人"></el-table-column>
                    <el-table-column prop="repaymentTime" sortable label="还款时间"></el-table-column>
					<el-table-column prop="repaymentNum" sortable label="还款期数"></el-table-column>
					<el-table-column prop="amount" sortable label="还款金额"></el-table-column>
					<el-table-column prop="surplusNum" sortable label="剩余周期"></el-table-column>
					<el-table-column prop="repaidAmount" sortable label="已还金额"></el-table-column>
					<el-table-column prop="surplusAmount" sortable label="剩余还款"></el-table-column>
                    <el-table-column sortable label="操作">
                       <template slot-scope="scope">
						 <div v-if="scope.row.status == 1">
							 待审核
						 </div>
                         <el-button
							v-if="scope.row.status == -1 || scope.row.status == 0"
                             type="text"
                             @click="repaymment(scope.$index, scope.row)"
                         >确认还款</el-button>
						 <div v-if="scope.row.status == -1" style="color: red;display: inline-block;">
							 （逾期）
						 </div>
						 <div v-if="scope.row.status == 2">
							 已还款
						 </div>
                       </template>
                    </el-table-column>
                </el-table>
				<el-pagination
				    layout="total, prev, pager, next, jumper"
				    :page-size="pagesize1"
				    :current-page.sync="page"
				    :total="total1"
				    @current-change="handleCurrentChange1"
				    style="margin-top: 20px"
				></el-pagination>
            <!-- </el-form-item> -->
            <el-form-item class="footerFixed" label-width="0px">
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
	import axios from "axios"
export default {
    data() {
        return {
			page:1,
			total1:'',
			pagesize1:10,
            labelPosition:"right",
            id: "",
            ruleForm: {},
            tableData:[],
			tableData1:[],
            day:"",
            rules:{

            },
			img:'',
			ifshow:false,
			ifshow1:false
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id == undefined) {
        } else {
            this.init();
        }
    },
    methods: {
		repaymment(index,row){
			this.$confirm('是否确认提交还款', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			}).then(() => {
				 let data = {
					 id:row.id,
					 status:1,
					 loanId:this.ruleForm.id
				 }
				axios.post("https://bbgy.cpzsyun.com:82/api/control/repayment/save",data).then((res)=>{
					this.$notify({
					    title: '提示',
					    message: '申请还款成功，等待银行审核',
					    type: 'success',
					    duration:1000
					});
				})
			})
		},
        init() {
			axios.get("https://bbgy.cpzsyun.com:82/api/control/loanInfo/findIdRepay/"+this.id).then((res)=>{
				this.ruleForm = res.data

				this.getlist()
			})


        },
		getlist(){
			let data = {
				loanId:this.ruleForm.id,
				page:this.page
			}
			axios.post("https://bbgy.cpzsyun.com:82/api/control/repayment/findByList",data).then((res)=>{
				this.tableData = res.data.rows
				this.total1 = res.data.total


			})

		},
        handleCurrentChange1(val) {
			this.page = val;
            this.getlist();
        },
        backPage() {
            this.$router.go(-1)
        }
    }
};
</script>

<style scoped>
	.el-pagination {
	    text-align: center;
	}
</style>
